{% extends '@YesknMain/base.html.twig' %}

{% block main %}
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    创建新主题
                </div>
                <div class="panel-body">
                    <form data-pjax-form action="{{ path('create_post') }}" method="post" id="createTopic">
                        <div class="form-group">
                            <label class="control-label required" for="post_title">标题</label>
                            <input type="text" id="post_title" name="title" required="required" maxlength="100" autofocus="autofocus" class="form-control">
                        </div>

                        <div class="form-group">
                            <label class="control-label required" for="content">内容</label>
                            <textarea class="form-control hide" name="content" id="content" cols="30" rows="10" title=""></textarea>
                            <div id="editor"></div>
                        </div>

                        <div class="form-group">
                            <label for="select-node">选择板块</label>
                            <select name="tab" id="select-node" class="form-control" title="">
                                {% for tab in tabs %}
                                    <option value="{{ tab.alias }}">{{ tab.name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <button type="submit" value="submit" class="btn btn-info">提交</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function () {
            window.YesknPlugins.get('WangEditor', function (wangEditor) {
                const vmoexEditor = new wangEditor('#editor');
                vmoexEditor.customConfig.printLog = false;
                vmoexEditor.customConfig.menus = [
                    'head',  // 标题
                    'bold',  // 粗体
                    'fontSize',  // 字号
                    'fontName',  // 字体
                    'italic',  // 斜体
                    'underline',  // 下划线
                    'strikeThrough',  // 删除线
                    'foreColor',  // 文字颜色
                    'backColor',  // 背景颜色
                    'link',  // 插入链接
                    'list',  // 列表
                    'justify',  // 对齐方式
                    'quote',  // 引用
                    'emoticon',  // 表情
                    'image',  // 插入图片
                    'table',  // 表格
                    'video',  // 插入视频
                    'code',  // 插入代码
                ];
                vmoexEditor.customConfig.uploadImgServer = '/post/images';
                vmoexEditor.customConfig.uploadFileName = 'file';
                vmoexEditor.customConfig.uploadImgParams = {
                    // 如果版本 <=v3.1.0 ，属性值会自动进行 encode ，此处无需 encode
                    // 如果版本 >=v3.1.1 ，属性值不会自动 encode ，如有需要自己手动 encode
                    token: 'abcdef12345'
                };
                vmoexEditor.customConfig.onchange = function (html) {
                    $('#content').val(html);
                };

                vmoexEditor.create();
            }, function () {
                $('#editor').empty();
            });
        })
    </script>
{% endblock %}

{% block sidebar %}
    <div class="panel panel-default">
        <div class="panel-heading">
            创建主题指南
        </div>
        <div class="panel-body">
            <ol>
                <li>请遵守相关法律规定</li>
                <li>请勿发布任何广告信息</li>
                <li>支持markdown格式</li>
            </ol>
        </div>
    </div>
{% endblock %}
